<template>
  <view class="container">
    <u-navbar
      :is-fixed="true"
      :border-bottom="false"
      :is-back="true"
      :background="{ background: '#5697F1' }"
      title="确认订单"
      title-color="#fff"
    >
    </u-navbar>
		<u-toast ref="uToast" />
    <view class="tickets">
      <view class="each">
        <view class="row">
          <view class="block">
            <view class="cn">{{ ticket.start }}</view>
            <view>{{ticket.startTime}}</view>
          </view>
          <view class="block">
            <view class="cn">{{ticket.name}}</view>
            <view>{{ticket.totalTime}}</view>
          </view>
          <view class="block">
            <view class="cn">{{ ticket.end }}</view>
            <view>{{ticket.endTime}}</view>
          </view>
        </view>
        <view class="seats">
          <view :class="curIndex === sIndex ? 'each-choose' : ''" @click="chooseTicket(sIndex, seat.cnt)" class="each" v-for="(seat, sIndex) in ticket.seats" :key="sIndex">
            <view class="b name">{{seat.name}}</view>
            <view class="b">¥{{seat.price}}</view>
            <view class="b">{{seat.cnt === 0 ? '无' : seat.cnt > 10 ? '有票' : seat.cnt + '张'}}</view>
            
            <view class="img" v-if="curIndex === sIndex">
              <image class="image" src="/static/images/check.svg"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="people">
      <view class="each" v-for="(p, pIndex) in peoples" :key="pIndex">
        <view class="head">
          <view class="name">{{p.realname}}</view>
          <image @click="doDelete(pIndex)" class="img" src="/static/images/delete.svg"></image>
        </view>
        <view class="cardno">{{p.cardno}}</view>
      </view>
      <view class="add" @click="choosePeople">选择乘车人</view>
    </view>
    <button class="submit" @click="commit">提交订单</button>
  </view>
</template>

<script>
import moment from 'moment'
import { getPass, updatePass } from '../../api/system/api'
export default {
  data() {
    return {
      station: {},
      mode: 'date',
			today: moment().format('YYYY-MM-DD'),
      ticket: {},
      curIndex: 0,
      peoples: [],
      userInfo: {},
      option: {}
    };
  },
  mounted() {
    // 初始化页面的时候获取数据
    this.refreshData()
  },
  onLoad(option) {
    // 别的页面跳转过来的参数
    this.ticket = JSON.parse(option.ticket)
    this.option = this.ticket.option
    // 设置初始化值  票价为0
    this.ticket.seats.forEach((v, i) => {
      this.ticket.seats[i].price = 0
    })
    // 处理票价
    let startIndex = 0
    let endIndex = 0
    // 起始站点到终点站的索引  比如 1~5 循环遍历 将价格累加起来得到该车次的不同座位的票价
    if (this.ticket.start !== this.ticket.startStation) {
      startIndex = this.ticket.line.findIndex(v => v.station === this.ticket.start)
    }
    endIndex = this.ticket.line.findIndex(v => v.station === this.ticket.end)
    for (let i = startIndex === 0 ? startIndex : startIndex + 1;i <= endIndex;i++) {
      let row = this.ticket.line[i]
      this.ticket.seats[0].price += row.price[0]
      this.ticket.seats[1].price += row.price[1]
      this.ticket.seats[2].price += row.price[2]
      this.ticket.seats[3].price += row.price[3]
    }
    // 处理curIndex
    // 当前选择座位的索引
    this.curIndex = this.ticket.seats.findIndex(v => v.cnt > 0)
  },
  onShow() {
    // 监听其他页面的刷新事件
    uni.$off('UpData')
    uni.$once('UpData', (data) => {
      this.refreshData()
    })
  },
  methods: {
    // 选择座位类型
    chooseTicket(index, cnt) {
      if (cnt === 0) {
        return
      }
      this.curIndex = index
    },
    // 选择乘车人 跳转到相应页面
    choosePeople() {
			this.$u.route('/pages/interest/choose')
    },
    commit() {
      // 提交订单先判断有没有登录
      if (!this.userInfo.id) {
        this.$refs.uToast.show({
          title: '请先登录',
          type: 'error',
        })
        return
      }
      // 判断有没有乘车人
      if (!this.peoples.length) {
        this.$refs.uToast.show({
          title: '请选择乘坐人',
          type: 'error',
        })
        return
      }
      // 跳转支付页面 并携带票、乘车人等信息
			this.$u.route('/pages/interest/pay', {
        data: JSON.stringify({
          peoples: this.peoples,
          ticket: this.ticket,
          curIndex: this.curIndex,
          userInfo: this.userInfo,
          option: this.option
        })
			})
    },
    // 删除乘车人
    doDelete(index) {
      // 更新表的choose字段 设为false
      updatePass(this.peoples[index].id, {
        choose: 'false'
      }).then(res => {
        if (res.code === 200) {
          this.peoples.splice(index, 1)
        }
      })
    },
    // 刷新数据
    refreshData() {
      this.peoples = []
      // 读取缓存中的用户信息
      uni.getStorage({     
        key:'userInfo',
        success: (user) => {
          this.userInfo = user.data;
          // 获取该用户的乘客数据
          getPass({
            page: 1,
            pageSize: 10,
            userId: this.userInfo.id
          }).then(res => {
            if (res.code === 200) {
              this.peoples = this.peoples.concat(res.data.data.filter(v => v.choose === 'true'))
            }
          })
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f1ebeb;
  min-height: 100vh;
  overflow: hidden;
  padding: 2rpx;
}
.station {
  display: flex;
  width: 50%;
  margin: 0 auto;
  align-items: center;
  font-size: 40rpx;
  justify-content: space-around;
  font-weight: bold;
  .img {
    width: 50rpx;
    height: 50rpx;
  }
}
.date {
	display: flex;
	padding: 30rpx 60rpx 0 60rpx;
	font-size: 30rpx;
	justify-content: space-between;

	.img {
		width: 60rpx;
		height: 60rpx;
	}
}
.row {
  margin: 0 auto;
	width: 50%;
  text-align: center;
}
.tickets {
  padding: 30rpx;
  .each {
    background: #fff;
    border-radius: 12rpx;
    padding: 12rpx;
    margin-bottom: 10rpx;

    .row {
      display: flex;
      width: 100%;
      justify-content: space-between;
      font-size: 30rpx;
      font-weight: bold;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #e4dada;
      .cn {
        font-size: 26rpx;
        margin-bottom: 10rpx;
      }
    }
    .seats {
      display: flex;
      margin-top: 30rpx;
      justify-content: space-between;
      padding-bottom: 20rpx;
      .each {
        width: 20%;
        border: 1rpx solid #e4dada;
        border-radius: 10rpx;
        position: relative;
        .b {
          text-align: center;
          width: 100%;
        }
        .name {
          font-weight: bold;
        }

        .img {
          width: 30rpx;
          height: 30rpx;
          position: absolute;
          right: -0;
          top: -0;
          display: flex;
          background: #5779c7;
          .image {
            margin: auto;
            width: 20rpx;
            height: 20rpx;
          }
        }
      }

      .each-choose {
        border-color: blue;
      }
    }
  }

}
.people {
  padding: 0 30rpx 0 30rpx;
  background: #fff;
  margin-top: 30rpx;
  width: calc(100% - 60rpx);
  margin: auto;
  border-radius: 20rpx;
  .img {
    width: 30rpx;
    height: 30rpx;
  }

  .each {
    padding-bottom: 20rpx;
    margin-top: 20rpx;
    border-bottom: 1rpx solid #e4dada;
    .head {
      padding-top: 20rpx;
      display: flex;
      width: 100%;
      justify-content: space-between;
      font-weight: bold;
    }
    .cardno {
      margin-top: 20rpx;
    }
  }

  .add {
    text-align: center;
    width: 100%;
    font-weight: bold;
    line-height: 80rpx;
  }
}
.submit {
	margin: 90rpx auto;
	border: none;
	width: calc(100% - 60rpx);
	height: 86rpx;
	line-height: 86rpx;
	box-sizing: border-box;
	border-radius: 15rpx;
	background-color: #5f88ff;
	color: #ffffff;
}
</style>
